import { useState, type FC } from "react";
import {
  decrement as decrementActionCreator,
  decrementAsyncActionCreator,
  selectCount,
  selectPending,
} from "@/store/counterSlice";
import { Space, Button, Input } from "antd";
import { useAppDispatch, useAppSelector } from "@/store/hook";
import { getColorThunkCreator, selectColorPending } from "@/store/colorSlice";
const Right: FC = () => {
  const count = useAppSelector(selectCount);
  const dispatch = useAppDispatch();
  const pending = useAppSelector(selectPending);
  // #1
  const colorPending = useAppSelector(selectColorPending);
  const [num, setNum] = useState(1);
  const decrement = (payload?: number) => {
    dispatch(decrementActionCreator(payload));
  };

  return (
    <div>
      <h3>Right: {count}</h3>
      <Input
        value={num}
        onChange={(e) => setNum(Number(e.currentTarget.value))}
      />
      <Space>
        <Button type="primary" onClick={() => decrement(1)}>
          -1
        </Button>
        <Button type="primary" onClick={() => decrement(3)}>
          -3
        </Button>
        <Button type="primary" onClick={() => decrement(num)}>
          -n
        </Button>
        <Button
          loading={pending}
          type="primary"
          onClick={() => dispatch(decrementAsyncActionCreator(1))}
        >
          async -1
        </Button>
        {/* #2 */}
        <Button
          loading={colorPending}
          type="primary"
          onClick={() => dispatch(getColorThunkCreator(2))}
        >
          随机颜色
        </Button>
      </Space>
    </div>
  );
};

export default Right;
